<template>
    <!-- Navbar Start -->
    <nav
        class="navbar navbar-expand-lg bg-white navbar-light shadow sticky-top p-0"
        :style="stickyTop"
    >
        <router-link
            to="/"
            href="index.html"
            class="navbar-brand d-flex align-items-center text-center py-0 px-4 px-lg-5"
        >
            <img style="max-width: 240px" src="/images/logo.png" alt="" />
        </router-link>
        <button
            ref="triggerBtn"
            type="button"
            class="navbar-toggler me-4"
            data-bs-toggle="collapse"
            data-bs-target="#navbarCollapse"
        >
            <span class="navbar-toggler-icon"></span>
        </button>
        <div ref="navbarCollapse" id="navbarCollapse" class="collapse navbar-collapse">
            <div class="navbar-nav ms-auto p-4 p-lg-0">
                <router-link to="/home" class="nav-item nav-link" active-class="active"
                    >首页</router-link
                >
                <router-link to="/about" class="nav-item nav-link" active-class="active"
                    >关于佑恩</router-link
                >
                <div class="nav-item dropdown">
                    <router-link
                        to="/detail#goodat"
                        class="nav-link dropdown-toggle"
                        active-class="active"
                        >选择佑恩</router-link
                    >
                    <div class="dropdown-menu rounded-0 m-0">
                        <span
                            class="dropdown-item hash-key"
                            :class="{ active: hashKey == 'goodat' }"
                            @click="jump('/detail#goodat')"
                        >
                            佑恩优势
                        </span>
                        <span
                            class="dropdown-item hash-key"
                            :class="{ active: hashKey == 'product' }"
                            @click="jump('/detail#product')"
                        >
                            产品与服务
                        </span>
                    </div>
                </div>
                <div class="nav-item dropdown">
                    <router-link
                        to="/category#1"
                        class="nav-link dropdown-toggle"
                        exact-active-class="active"
                        data-bs-toggle="dropdown"
                        >行业领域</router-link
                    >
                    <div class="dropdown-menu rounded-0 m-0">
                        <span
                            v-for="item in categoryList"
                            :key="item.path"
                            class="dropdown-item hash-key"
                            :class="{ active: hashKey == item.path.split('#')[1] }"
                            @click="jump(item.path)"
                        >
                            {{ item.name }}
                        </span>
                    </div>
                </div>
                <router-link to="/news" class="nav-item nav-link" active-class="active"
                    >新闻中心</router-link
                >
                <router-link to="/connect" class="nav-item nav-link" exact-active-class="active"
                    >联系我们</router-link
                >
            </div>
        </div>
    </nav>
    <!-- Navbar End -->
</template>

<script setup lang="ts">
    import { nextTick, reactive, ref, watch } from 'vue';
    import { useRoute, useRouter } from 'vue-router';
    const appTitle = import.meta.env.VITE_APP_TITLE;
    const route = useRoute();

    const router = useRouter();

    const hashKey = ref();

    const triggerBtn = ref<HTMLDivElement>();

    const navbarCollapse = ref<HTMLDivElement>();

    const categoryList = reactive([
        { name: '互联网.游戏.软件', path: '/category#1' },
        { name: '新能源.汽车.制造', path: '/category#2' },
        { name: '电子.通信.硬件', path: '/category#3' },
        { name: '新消费.新零售', path: '/category#4' },
        { name: '人力.财务.法务', path: '/category#5' },
        { name: '制药.医疗.健康', path: '/category#6' },
        { name: '工业.能源.化工', path: '/category#7' }
    ]);

    watch(route, () => {
        const { meta } = route;
        document.title = meta.title ? `${meta.title}` : appTitle;
        window.scrollTo({ top: 0, behavior: 'smooth' });
        if (route.hash) {
            hashKey.value = route.hash.slice(1);
            nextTick(() => document.getElementById(route.hash.slice(1))?.scrollIntoView());
        } else {
            hashKey.value = null;
        }
        if (navbarCollapse.value?.classList.contains('show')) {
            triggerBtn.value?.click();
        }
    });

    const jump = (url: string) => {
        const [targetPath, hash] = url.split('#');
        if (route.path != targetPath) {
            router.push(url);
        } else {
            document.getElementById(hash)?.scrollIntoView();
            hashKey.value = hash;
        }
    };

    defineProps({
        stickyTop: {
            type: String,
            default: 'top: 0px;'
        }
    });
</script>

<style>
    .hash-key {
        cursor: pointer;
    }
</style>
